<template>
  <transition mode="out-in">
    <div class="box" :class="onStatus" @click="toggle" v-text="info"></div>
  </transition>
</template>

<script>
export default {
  name: "LhzH",
  data() {
    return {
      isOn: true,
      info: '设备开机'
    }
  },
  methods: {
    toggle() {
      this.isOn = !this.isOn;
      this.info = this.isOn ? '设备开机' : '设备关机'
    },
  },
  computed: {
    onStatus() {
      return {
        on: this.isOn,
        off: !this.isOn
      }
    }
  }
}
</script>

<style scoped>
.box {
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 33px;
  color: #ffffff;
  cursor: pointer;
  transition: 500ms all ease;;
}

.on {
  background-color: #00AA00;
}

.off {
  background-color: #FF0000;
}

</style>